[V0_FILE]plaintext:file="public/images/deepseek-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/deepseek-logo-icon-sRKzPJ5WyYP0OMlYLYsVJtYOS9A2cP.png" isMerged="true" [V0_FILE]plaintext:file="public/images/google-gemini-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/google-gemini-icon-QbOWeVrPRyQkP8YaEgj4MM5MR62fhX.png" isMerged="true" [V0_FILE]plaintext:file="public/images/openai-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/openai-icon-logo-512-iYF3xz5vCcQY2F7SyBcLMFTxofk498.png" isMerged="true" [V0_FILE]plaintext:file="public/images/meta-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/meta-icon-A2aL2gURcIyaqoopyj8utS06AyYEj1.png" isMerged="true" [V0_FILE]plaintext:file="public/images/claude-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/claude-ai-icon-wn7aOPyj8VkTRbXWAXivfdHm2KVJ7h.png" isMerged="true" [V0_FILE]typescriptreact:file="components/sortable-model-item.tsx" isEdit="true" isMerged="true" "use client" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import ModelItem from "./model-item" interface SortableModelItemProps { model: { id: string name: string image: string } } export default function SortableModelItem({ model }: SortableModelItemProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: model.id }) const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 10 : 1, } return (

) } [V0_FILE]typescriptreact:file="components/tier-list-creator.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core" import { SortableContext, sortableKeyboardCoordinates, rectSortingStrategy } from "@dnd-kit/sortable" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Plus, X, Save, Upload, Edit, Trash2, Settings, FileText, RefreshCw, Check, Pencil } from "lucide-react" import TierRow from "./tier-row" import SortableModelItem from "./sortable-model-item" // Define types for our data structures interface TierItem { id: string label: string color: string } interface ModelItem { id: string name: string image: string } interface ColorOption { name: string bg: string text: string } // Define default tier colors - more subtle, modern palette const defaultTierColors = { S: "bg-rose-50 text-rose-600", A: "bg-amber-50 text-amber-600", B: "bg-yellow-50 text-yellow-600", C: "bg-emerald-50 text-emerald-600", D: "bg-sky-50 text-sky-600", F: "bg-violet-50 text-violet-600", } // Define default tiers const defaultTiers: TierItem[] = [ { id: "S", label: "S", color: defaultTierColors.S }, { id: "A", label: "A", color: defaultTierColors.A }, { id: "B", label: "B", color: defaultTierColors.B }, { id: "C", label: "C", color: defaultTierColors.C }, { id: "D", label: "D", color: defaultTierColors.D }, { id: "F", label: "F", color: defaultTierColors.F }, ] // Define default AI models as example items const defaultItems: ModelItem[] = [ { id: "gpt-4o", name: "GPT-4o", image: "/images/openai-icon.png" }, { id: "claude-3-opus", name: "Claude 3 Opus", image: "/images/claude-icon.png" }, { id: "gemini-pro", name: "Gemini Pro", image: "/images/google-gemini-icon.png" }, { id: "llama-3", name: "Llama 3", image: "/images/meta-icon.png" }, { id: "deepseek", name: "DeepSeek", image: "/images/deepseek-logo.png" }, { id: "claude-3-sonnet", name: "Claude 3 Sonnet", image: "/images/claude-icon.png" }, { id: "gpt-3.5", name: "GPT-3.5", image: "/images/openai-icon.png" }, { id: "gemini-flash", name: "Gemini Flash", image: "/images/google-gemini-icon.png" }, ] // Available colors for tier customization - more subtle, modern palette const availableColors: ColorOption[] = [ { name: "Red", bg: "bg-rose-50", text: "text-rose-600" }, { name: "Orange", bg: "bg-amber-50", text: "text-amber-600" }, { name: "Yellow", bg: "bg-yellow-50", text: "text-yellow-600" }, { name: "Green", bg: "bg-emerald-50", text: "text-emerald-600" }, { name: "Blue", bg: "bg-sky-50", text: "text-sky-600" }, { name: "Purple", bg: "bg-violet-50", text: "text-violet-600" }, { name: "Pink", bg: "bg-pink-50", text: "text-pink-600" }, { name: "Gray", bg: "bg-gray-50", text: "text-gray-600" }, ] export default function TierListCreator() { // State for tiers const [tiers, setTiers] = useState(defaultTiers) // State for items const [items, setItems] = useState(defaultItems) // State for tier assignments const [tierAssignments, setTierAssignments] = useState>({}) // State for unassigned items const [unassignedItems, setUnassignedItems] = useState([]) // State for tier list name const [tierListName, setTierListName] = useState("AI Models Tier List") // State for editing tier list name const [isEditingName, setIsEditingName] = useState(false) // State for temporary name while editing const [tempName, setTempName] = useState(tierListName) // State for saved tier lists const [savedTierLists, setSavedTierLists] = useState[]>([]) // State for open dialog const [isDialogOpen, setIsDialogOpen] = useState(false) // State for settings dialog const [isSettingsOpen, setIsSettingsOpen] = useState(false) // State for new item const [newItem, setNewItem] = useState<{ name: string; image: string }>({ name: "", image: "/placeholder.svg?height=50&width=50", }) // State for new tier const [newTier, setNewTier] = useState<{ label: string; color: string }>({ label: "", color: `${availableColors[0].bg} ${availableColors[0].text}`, }) // State for editing item const [editingItem, setEditingItem] = useState(null) // State for editing tier const [editingTier, setEditingTier] = useState(null) // Ref for the name input const nameInputRef = useRef(null) // Initialize tier assignments and unassigned items useEffect(() => { const initialTierAssignments: Record = {} tiers.forEach((tier) => { initialTierAssignments[tier.id] = [] }) setTierAssignments(initialTierAssignments) setUnassignedItems(items.map((item) => item.id)) }, []) // Update tier assignments when tiers change useEffect(() => { const updatedTierAssignments: Record = {} tiers.forEach((tier) => { updatedTierAssignments[tier.id] = tierAssignments[tier.id] || [] }) setTierAssignments(updatedTierAssignments) }, [tiers]) // Load saved tier lists from local storage useEffect(() => { try { const savedLists = localStorage.getItem("tierLists") if (savedLists) { setSavedTierLists(JSON.parse(savedLists)) } } catch (error) { console.error("Failed to load saved tier lists:", error) } }, []) // Focus the name input when editing starts useEffect(() => { if (isEditingName && nameInputRef.current) { nameInputRef.current.focus() } }, [isEditingName]) // Set up sensors for drag and drop const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8, // 8px of movement required before activation }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ) // Start editing the tier list name const startEditingName = () => { setTempName(tierListName) setIsEditingName(true) } // Save the edited tier list name const saveEditedName = () => { if (tempName.trim()) { setTierListName(tempName) } setIsEditingName(false) } // Handle key press in the name input const handleNameKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { saveEditedName() } else if (e.key === "Escape") { setIsEditingName(false) } } // Handle drag end const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event if (!over) return const activeId = active.id as string const overId = over.id as string // If the item is dropped in the same container, do nothing if (activeId === overId) return // Find the source tier let sourceTier = "" let found = false // Check if the item is in unassigned items if (unassignedItems.includes(activeId)) { sourceTier = "unassigned" found = true } // Check if the item is in a tier if (!found) { for (const tier in tierAssignments) { if (tierAssignments[tier].includes(activeId)) { sourceTier = tier found = true break } } } // If the item is dropped in a tier if (tiers.some((tier) => tier.id === overId)) { // Remove the item from the source if (sourceTier === "unassigned") { setUnassignedItems(unassignedItems.filter((id) => id !== activeId)) } else if (sourceTier) { setTierAssignments({ ...tierAssignments, [sourceTier]: tierAssignments[sourceTier].filter((id) => id !== activeId), }) } // Add the item to the target tier setTierAssignments({ ...tierAssignments, [overId]: [...tierAssignments[overId], activeId], }) } // If the item is dropped in the unassigned area else if (overId === "unassigned") { // Remove the item from the source tier if (sourceTier && sourceTier !== "unassigned") { setTierAssignments({ ...tierAssignments, [sourceTier]: tierAssignments[sourceTier].filter((id) => id !== activeId), }) } // Add the item to unassigned if (!unassignedItems.includes(activeId)) { setUnassignedItems([...unassignedItems, activeId]) } } } // Save tier list const saveTierList = () => { if (!tierListName.trim()) { return // Don't save if name is empty } const newTierList = { name: tierListName, tiers, items, tierAssignments, unassignedItems, date: new Date().toISOString(), } const updatedLists = [...savedTierLists, newTierList] setSavedTierLists(updatedLists) try { localStorage.setItem("tierLists", JSON.stringify(updatedLists)) setIsDialogOpen(false) } catch (error) { console.error("Failed to save tier list:", error) // Could add a toast notification here } } // Load tier list const loadTierList = (index: number) => { try { const tierList = savedTierLists[index] setTierListName(tierList.name) setTiers(tierList.tiers) setItems(tierList.items) setTierAssignments(tierList.tierAssignments) setUnassignedItems(tierList.unassignedItems) setIsDialogOpen(false) } catch (error) { console.error("Failed to load tier list:", error) // Could add a toast notification here } } // Reset tier list const resetTierList = () => { const initialTierAssignments: Record = {} tiers.forEach((tier) => { initialTierAssignments[tier.id] = [] }) setTierAssignments(initialTierAssignments) setUnassignedItems(items.map((item) => item.id)) } // Add new item const addItem = () => { if (!newItem.name.trim()) return const id = `item-${Date.now()}` const item = { id, name: newItem.name, image: newItem.image, } setItems([...items, item]) setUnassignedItems([...unassignedItems, id]) setNewItem({ name: "", image: "/placeholder.svg?height=50&width=50" }) } // Add new tier const addTier = () => { if (!newTier.label.trim()) return const id = `tier-${Date.now()}` const tier = { id, label: newTier.label, color: newTier.color, } setTiers([...tiers, tier]) setTierAssignments({ ...tierAssignments, [id]: [], }) setNewTier({ label: "", color: `${availableColors[0].bg} ${availableColors[0].text}` }) } // Update item const updateItem = () => { if (!editingItem || !editingItem.name.trim()) return setItems(items.map((item) => (item.id === editingItem.id ? editingItem : item))) setEditingItem(null) } // Update tier const updateTier = () => { if (!editingTier || !editingTier.label.trim()) return setTiers(tiers.map((tier) => (tier.id === editingTier.id ? editingTier : tier))) setEditingTier(null) } // Delete item const deleteItem = (id: string) => { // Remove from items setItems(items.filter((item) => item.id !== id)) // Remove from unassigned items setUnassignedItems(unassignedItems.filter((itemId) => itemId !== id)) // Remove from tier assignments const updatedTierAssignments = { ...tierAssignments } for (const tier in updatedTierAssignments) { updatedTierAssignments[tier] = updatedTierAssignments[tier].filter((itemId) => itemId !== id) } setTierAssignments(updatedTierAssignments) } // Delete tier const deleteTier = (id: string) => { // Move items from this tier to unassigned const itemsInTier = tierAssignments[id] || [] setUnassignedItems([...unassignedItems, ...itemsInTier]) // Remove tier setTiers(tiers.filter((tier) => tier.id !== id)) // Remove from tier assignments const { [id]: _, ...restTierAssignments } = tierAssignments setTierAssignments(restTierAssignments) } // Handle image upload const handleImageUpload = (e: React.ChangeEvent, isEditing: boolean) => { const file = e.target.files?.[0] if (!file) return const reader = new FileReader() reader.onload = (event) => { const imageUrl = event.target?.result as string if (isEditing && editingItem) { setEditingItem({ ...editingItem, image: imageUrl }) } else { setNewItem({ ...newItem, image: imageUrl }) } } reader.readAsDataURL(file) } return (

{isEditingName ? (

setTempName(e.target.value)} onKeyDown={handleNameKeyPress} onBlur={saveEditedName} className="text-xl font-semibold py-2 h-auto" aria-label="Edit tier list name" />

) : (

e.key === "Enter" && startEditingName()} >

{tierListName}

)}

{tiers.map((tier) => ( ))}

Unassigned Items

{unassignedItems.length === 0 ? (

All items have been assigned to tiers

) : ( unassignedItems.map((itemId) => { const item = items.find((i) => i.id === itemId) if (!item) return null return }) )}

) } [V0_FILE]typescriptreact:file="components/tier-row.tsx" isEdit="true" isMerged="true" "use client" import { useDroppable } from "@dnd-kit/core" import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable" import SortableModelItem from "./sortable-model-item" interface TierRowProps { tier: { id: string label: string color: string } models: string[] allModels: { id: string name: string image: string }[] } export default function TierRow({ tier, models, allModels }: TierRowProps) { const { setNodeRef } = useDroppable({ id: tier.id, }) return (

{models.map((modelId) => { const model = allModels.find((m) => m.id === modelId) if (!model) return null return })}

) } [V0_FILE]typescriptreact:file="components/model-item.tsx" isEdit="true" isMerged="true" interface ModelItemProps { model: { id: string name: string image: string } } export default function ModelItem({ model }: ModelItemProps) { return (

{model.name}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import TierListCreator from "@/components/tier-list-creator" export default function Home() { return (

Create your Tier List

Drag and drop AI models to create your personal tier ranking

) }

{tierListName}

Add New Item

Manage Items

Edit Item

Add New Tier

Manage Tiers

Edit Tier

Unassigned Items

Create your Tier List

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This